<script lang="ts" setup>
import { ref, reactive, watch, onMounted, onUnmounted } from 'vue';
import PageCaontainer from '@/arco-components/PageContainer';
import { useRouter, useRoute } from 'vue-router';
import { getCookie } from '@/utils/util';
import { Message, Modal } from '@arco-design/web-vue';

const router = useRouter();
const showBack=ref<boolean>(false)
const state = reactive({
    iframeUrl: ''
});
const statusStr :any=ref()
const breameTitle:any=ref('审批流设置')
const loading = ref<boolean>(false)
  
loading.value = true
setTimeout(()=>{
    console.log(getCookie('access-token'))
    state.iframeUrl = `/new-approval/#/approvalSet?access-token=${getCookie('access-token')}`;
    loading.value = false
}, 100)

const createApproval = () => {

    router.push({
        name: 'CreatedFlow'
    })
}

// 返回
const handleBackTip = ( ) => {
  Modal.confirm({
    modalClass: 'model-message-confirm',
    title: '确定返回吗？',
    content: '返回后所填信息将被清空',
    simple: false,
    closable: true,
    okText: '确定',
    okButtonProps: {
      style: {
        backgroundColor: '#3C6EFF'
      }
    },
    onBeforeOk: (done) => {
      showBack.value = false
      breameTitle.value = '审批流设置'
      router.go(-1)
      done(true);
    }
  });
};

const handleBack = () => {
    console.log('editBack: ', statusStr.value)
    if (statusStr.value === 'edit') {
        handleBackTip()
    } else {
        showBack.value = false
        breameTitle.value = '审批流设置'
        router.go(-1)
    }
}

// var handleFunc:any= null;
const commonFn = (e:any) => {
    console.log('message: ', e)
    if (e.data.type === 'arcoSaveSuccess') {
        statusStr.value = 'save'
        showBack.value = false
        breameTitle.value = '审批流设置'
        router.go(-1)
        console.log('save success: ')
    }
    if (e.data.type === 'arcoEditDetailPage') {
        showBack.value = true
        statusStr.value = 'edit'
        breameTitle.value = '编辑审批流'

    }
    if (e.data.type === 'arcoCheckDetailPage') {
        showBack.value = true
        statusStr.value = 'check'
        breameTitle.value = '查看审批流'
    }
}
const handleFunc = (e:any) => {
    commonFn(e)
}
onMounted(() => {  
    console.log('mounted： ')
    window.removeEventListener('message', handleFunc); 
    window.addEventListener('message', handleFunc)
});
onUnmounted(()=>{
    console.log('edit unMounted:   ')
    window.removeEventListener('message', handleFunc);
})
</script>

<template>
    <PageCaontainer :title="breameTitle" :show-back="showBack" @back="handleBack">
        <template #extra>
            <a-button
                v-show="!showBack"
                type="primary"
                @click="createApproval"
            >+新建审批流</a-button
        ></template>
        <a-card class="approval-center-card">
            <a-spin style="height: 100%;width: 100%;" :loading="loading">
            <iframe
                id="iframeId"
                allowfullscreen="true"
                frameborder="0"
                width="100%"
                class="iframe-div"
                :src="state.iframeUrl"
            ></iframe>
            </a-spin>
        </a-card>
    </PageCaontainer>
</template>

<style lang="scss" scoped>
.iframe-div {
  height: 100%;
}

.approval-center-card {
    background: #f5f7fa;
    height: 100%;
    border: none;
    :deep(.arco-card-body) {
        padding: 0;
        height: 100%;
    }
}
</style>